<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="wa">
    <title></title>
    <script src="../js/jquery-3.1.1.js"></script>
    <style>
        *{
            box-sizing: border-box;
        }
        ul,li{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #box{
            width: 202px;
            height: 540px;
            margin: 0 auto;
            border: 1px solid gray;
        }
        #box h1{
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #e9e5e3;
            margin: 0;
            padding: 0;
        }
        #box ul{
            width: 100%;
        }
        #box li{
            margin: 10px;
            width: 180px;
            height: 150px;
            position: relative;
            cursor: pointer;
            overflow: hidden;
        }
        #box .xImg{
            position: absolute;
            top: 0;
            left: 0;
        }
        #box .xianshi{
            position: absolute;
            bottom: 0px;
            width: 180px;
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            padding-left: 10px;
            background-color: #da6460;
            color: white;
            font-weight: bold;
        }
        #box li:nth-child(2) .xianshi{
            background-color: #104752;
        }
        #box li:nth-child(3) .xianshi{
            background-color: #1471b1;
        }
        #box .yincang{
            position: absolute;
            top: 0;
            right: -190px;
            opacity: 0;
            /*visibility: hidden;*/
        }
        #box .overlay{
            position: absolute;
            bottom: -10px;
            opacity: 0;
        }
    </style>
</head>
<body>
    <div id="box">
            <h1>专辑推荐</h1>
            <ul>
                <li>
                    <img class="xImg" src="../img/1_1.jpg" alt="">
                    <div class="xianshi">COCOON/可可尼克</div>
                    <img class="yincang" src="../img/1_2.jpg" alt="">
                    <div class="xianshi overlay">几何为网-极致绚烂</div>
                </li>
                <li>
                    <img class="xImg" src="../img/2_1.jpg" alt="">
                    <div class="xianshi">INSUN/恩裳</div>
                    <img class="yincang" src="../img/2_2.jpg" alt="">
                    <div class="xianshi overlay">2003春印象</div>
                </li>
                <li>
                    <img class="xImg" src="../img/3_1.jpg" alt="">
                    <div class="xianshi">JNBY/江南布衣</div>
                    <img class="yincang" src="../img/3_2.jpg" alt="">
                    <div class="xianshi overlay">EANMENG/南梦</div>
                </li>
            </ul>
    </div>
</body>
</html>
<script>
    // 鼠标放上去
    $('#box ul li').hover(function(){
        // 把隐藏的图片显示出来，显示的隐藏起来
        $(this).find('.yincang').stop().animate({right:0,opacity:1},500);
        $(this).find('.xImg').stop().animate({left:-200,opacity:0},500);
        // 把显示的标签名隐藏起来，隐藏的显示起来
        $(this).find('.xianshi').stop().animate({bottom:-20,opacity:0},500);
        $(this).find('.overlay').stop().animate({bottom:0,opacity:1},500);
        
        
    },function(){
        // 鼠标离开
        // 把被隐藏的图片从新显示出来，...
        $(this).find('.xImg').stop().animate({left:0,opacity:1},300);
        $(this).find('.xianshi').stop().animate({bottom:0,opacity:1},500);
        // 把被显示标签名从新隐藏出来，...
        $(this).find('.yincang').stop().animate({right:-190,opacity:0},300);
        $(this).find('.overlay').stop().animate({bottom:-20,opacity:0},200);
    });

</script>